<!-- Calendar.vue - 日历组件 -->
<template>
  <view class="calendar">
    <!-- 月份和年份显示 -->
    <view class="calendar-header">
      <uni-icons type="left" size="22" color="#4CAF50" @click="prevMonth"></uni-icons>
      <view class="calendar-title">{{ currentYear }}年{{ currentMonth }}月</view>
      <uni-icons type="right" size="22" color="#4CAF50" @click="nextMonth"></uni-icons>
    </view>
    
    <!-- 星期标题 -->
    <view class="weekdays">
      <view class="weekday" v-for="weekday in weekdays" :key="weekday">{{ weekday }}</view>
    </view>
    
    <!-- 日期格子 -->
    <view class="calendar-grid">
      <!-- 上个月的日期 -->
      <view class="calendar-day other-month" v-for="day in prevMonthDays" :key="'prev-' + day">
        <text>{{ day }}</text>
      </view>
      
      <!-- 当月的日期 -->
    <view class="calendar-day" :class="{ 'today': isToday(day), 'selected': isSelected(day) }" 
          v-for="day in currentMonthDays" :key="day"
          @click="selectDate(day)">
      <text>{{ day }}</text>
      <!-- 任务指示器 -->
      <view class="task-indicator" v-if="hasTasks(day)"></view>
      <!-- 今天标记 - 只在日视图下显示 -->
      <view class="today-mark" v-if="isToday(day) && viewType === 'day'">{{ viewType === 'day' ? '今' : '' }}</view>
    </view>
      
      <!-- 下个月的日期 -->
      <view class="calendar-day other-month" v-for="day in nextMonthDays" :key="'next-' + day">
        <text>{{ day }}</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'Calendar',
  props: {
    // 从父组件接收的视图类型
    viewType: {
      type: String,
      default: 'day'
    }
  },
  data() {
    return {
      // 当前日期对象
      currentDate: new Date(),
      // 星期标题
      weekdays: ['日', '一', '二', '三', '四', '五', '六']
    }
  },
  computed: {
    // 当前年份
    currentYear() {
      return this.currentDate.getFullYear()
    },
    // 当前月份（从1开始）
    currentMonth() {
      return this.currentDate.getMonth() + 1
    },
    // 当前月份的总天数
    currentMonthDays() {
      const year = this.currentYear
      const month = this.currentMonth - 1 // JavaScript月份从0开始
      const daysInMonth = new Date(year, month + 1, 0).getDate()
      return Array.from({ length: daysInMonth }, (_, i) => i + 1)
    },
    // 上个月需要显示的天数
    prevMonthDays() {
      const year = this.currentYear
      const month = this.currentMonth - 1
      // 获取当月第一天是星期几
      const firstDayOfMonth = new Date(year, month - 1, 1).getDay()
      
      // 获取上个月的总天数
      const prevMonth = month - 1
      const prevMonthYear = prevMonth < 0 ? year - 1 : year
      const prevMonthDaysCount = new Date(prevMonthYear, prevMonth < 0 ? 11 : prevMonth, 0).getDate()
      
      // 生成上个月需要显示的日期数组
      const prevDays = []
      for (let i = 0; i < firstDayOfMonth; i++) {
        prevDays.push(prevMonthDaysCount - i)
      }
      
      return prevDays.reverse()
    },
    // 下个月需要显示的天数
    nextMonthDays() {
      const year = this.currentYear
      const month = this.currentMonth - 1
      const daysInMonth = new Date(year, month + 1, 0).getDate()
      // 获取当月最后一天是星期几
      const lastDayOfMonth = new Date(year, month, daysInMonth).getDay()
      
      // 需要填充的下个月的天数
      const daysToFill = 6 - lastDayOfMonth
      const nextDays = Array.from({ length: daysToFill }, (_, i) => i + 1)
      
      return nextDays
    }
  },
  methods: {
    // 切换到上个月
    prevMonth() {
      this.currentDate = new Date(this.currentYear, this.currentMonth - 2, 1)
      this.$emit('month-change', this.currentDate)
    },
    
    // 切换到下个月
    nextMonth() {
      this.currentDate = new Date(this.currentYear, this.currentMonth, 1)
      this.$emit('month-change', this.currentDate)
    },
    
    // 选择日期
    selectDate(day) {
      const selectedDate = new Date(this.currentYear, this.currentMonth - 1, day)
      this.$emit('date-select', selectedDate)
    },
    
    // 判断是否是今天
    isToday(day) {
      const today = new Date()
      return today.getFullYear() === this.currentYear && 
             today.getMonth() === this.currentMonth - 1 && 
             today.getDate() === day
    },
    
    // 判断是否是选中的日期
    isSelected(day) {
      if (!this.selectedDate) return false
      
      const selected = new Date(this.selectedDate)
      return selected.getFullYear() === this.currentYear && 
             selected.getMonth() === this.currentMonth - 1 && 
             selected.getDate() === day
    },
    
    // 检查某天是否有任务
    hasTasks(day) {
      const checkDate = new Date(this.currentYear, this.currentMonth - 1, day)
      const checkDateStr = checkDate.toDateString()
      
      // 这里应该从父组件接收任务列表并检查
      return this.tasks && this.tasks.some(task => {
        if (!task.isRecurring) {
          // 一次性任务，直接比较日期
          const taskDate = new Date(task.date).toDateString()
          return taskDate === checkDateStr
        } else {
          // 周期性任务，根据重复模式判断
          const taskDate = new Date(task.date)
          
          // 如果是今天或未来的日期，才需要显示在日历上
          if (checkDate >= taskDate) {
            // 根据重复模式判断
            switch (task.recurrencePattern) {
              case 'daily':
                // 每天重复，任何日期都显示
                return true
              case 'weekly':
                // 每周重复，检查星期几是否相同
                return checkDate.getDay() === taskDate.getDay()
              case 'workdays':
                // 工作日重复，检查是否是周一到周五
                const dayOfWeek = checkDate.getDay()
                return dayOfWeek >= 1 && dayOfWeek <= 5
              default:
                // 其他情况，默认不显示
                return false
            }
          }
          return false
        }
      })
    },
    
    // 设置选中的日期
    setSelectedDate(date) {
      this.selectedDate = date
    },
    
    // 设置任务列表
    setTasks(tasks) {
      this.tasks = tasks
    },
    
    // 滚动到当前月
    scrollToCurrentMonth() {
      // 获取当前日期
      const today = new Date()
      const currentYear = today.getFullYear()
      const currentMonth = today.getMonth() + 1
      
      // 如果当前显示的月份不是当前月，切换到当前月
      if (currentYear !== this.currentYear || currentMonth !== this.currentMonth) {
        this.currentDate = new Date(currentYear, currentMonth - 1, 1)
      }
      
      // 在月视图下，滚动到当前月的位置（这里需要根据组件的实际实现来调整）
      // 由于这是一个简单的日历组件，我们主要是更新数据来显示当前月
    }
  },
  watch: {
    // 监听选中日期变化
    selectedDate(newDate) {
      if (newDate) {
        const date = new Date(newDate)
        // 如果选中的日期不在当前显示的月份，切换到对应月份
        if (date.getFullYear() !== this.currentYear || date.getMonth() !== this.currentMonth - 1) {
          this.currentDate = new Date(date.getFullYear(), date.getMonth(), 1)
        }
      }
    }
  }
}
</script>

<style scoped>
.calendar {
  background-color: white;
  padding: 10px;
  border-radius: 8px;
  margin-bottom: 16px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  padding: 0 10px;
}

.calendar-title {
  font-size: 16px;
  font-weight: bold;
}

.weekdays {
  display: flex;
  margin-bottom: 4px;
}

.weekday {
  text-align: center;
  font-size: 12px;
  color: #757575;
  width: 14.28%;
  margin-bottom: 4px;
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin-bottom: 16px;
}

.calendar-day {
  aspect-ratio: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  cursor: pointer;
  position: relative;
  border-radius: 50%;
}

.calendar-day.other-month {
  color: #ccc;
}

.calendar-day.today {
  background-color: #4CAF50;
  color: white;
}

.today-mark {
  position: absolute;
  top: -4px;
  right: -4px;
  font-size: 10px;
  background-color: #FF9800;
  color: white;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.calendar-day.selected {
  background-color: #C8E6C9;
  color: #388E3C;
  font-weight: bold;
}

.task-indicator {
  position: absolute;
  bottom: 4px;
  width: 8px;
  height: 8px;
  background-color: #FF9800;
  border-radius: 50%;
}
</style>